<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="d-flex flex-column moqui-navbar">
        <div class="container d-flex flex-row main-navbar">
            <a class="navbar-brand d-none d-sm-block" href="/store" >
                <img height="60px" class="moqui-logo moqui-logo1" src="./assets/moqui-logo.svg" alt="">
                <span class="font-italic navbar-title">POP Shop</span>
            </a>
            <a class="navbar-brand d-block d-sm-none" href="/store">
                <span class="font-italic navbar-title">POP Shop</span>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav_collapse1" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="navbar-collapse collapse">
                <form class="search-input" @submit.prevent="searchProduct" method="post">
                    <input type="text" placeholder="Search..." v-model="searchText">
                    <button class="search-button" type="submit"><i class="fa fa-search"></i></button>
                </form>
                <!-- Right aligned nav items -->
                <ul class="navbar-nav ml-auto">
                    <div class="text-secondary">
                        <span class="navbar-pop-title">Official POP Merchandise</span>
                        <span class="text-center navbar-pop-subtitle">Quality 100% Guaranted</span>
                    </div>
                </ul>
            </div>
        </div>
        <div id="nav_collapse1"  class="container navbar-collapse collapse">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link" href="#" id="navbarMenuShop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Shop <i class="fas fa-angle-down icon-down"></i></a>
                    
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item item-color" :href="'/store/category/' + category.productCategoryId" v-for="category in categories" :key="category.productCategoryId">
                            {{category.categoryName}}</a>
                    </div>
                </li>
                <a v-if="storeInfo.categoryByType.PsctPromotions" 
                    :href="'/store/category/' + storeInfo.categoryByType.PsctPromotions.productCategoryId" class="nav-link">
                    {{storeInfo.categoryByType.PsctPromotions.categoryName}}
                </a>
                <li class="nav-item dropdown">
                    <a class="nav-link" href="#" id="navbarMenuService" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Customer Service <i class="fas fa-angle-down icon-down"></i></a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item item-color" href="/store/content/help">Help Center</a>
                        <a class="dropdown-item item-color" href="/store/content/help">Delivery Rates</a>
                        <a class="dropdown-item item-color" href="/store/content/help#delivery">Delivery Times</a>
                        <a class="dropdown-item item-color" href="/store/content/help#customer-pick-up">Customer Pick Up</a>
                        <a class="dropdown-item item-color" href="/store/content/help#how-to-pay">How to pay</a>
                        <div role="separator" class="dropdown-divider"></div>
                        <a class="dropdown-item item-color" href="/store/content/about">About POP Shop</a>
                        <a class="dropdown-item item-color" href="/store/content/contact">Contact Us</a>
                    </div>
                </li>
            </ul>
            <!-- Right aligned nav items -->
            <ul class="navbar-nav ml-auto">
                <template v-if="customerInfo.firstName != null">
                    <li class="nav-item dropdown">
                        <a class="nav-link text-capitalize" href="#" id="navbarMenuAccount" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-user"></i> {{customerInfo.firstName}} {{customerInfo.lastName}} <i class="fas fa-angle-down icon-down"></i></a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <router-link :to="'/account'" tag="a" class="dropdown-item item-color">Account Settings</router-link>
                            <router-link :to="'/orders'" tag="a" class="dropdown-item item-color">My Orders</router-link>
                            <div role="separator" class="dropdown-divider"></div>
                            <a class="dropdown-item item-color" href="#" @click="logout()">Signout</a>
                        </div>
                    </li>
                </template>
                <template v-else>
                    <li class="nav-item">
                        <router-link :to="'/account/create'" tag="a" class="nav-link">Join Now</router-link>
                    </li>
                    <li class="nav-item">
                        <router-link :to="'/login'" tag="a" class="nav-link"><i class="fas fa-user"></i> Sign In</router-link>
                    </li>
                </template>
                <li class="nav-item nav-link" v-if="productsQuantity == 0">
                    <span class="cart-quantity">{{productsQuantity}}</span> <i class="fa fa-shopping-cart"></i> 
                    <span class="pointer" data-toggle="modal" data-target="#emptyCartModal">Cart</span>
                </li>
                <li class="nav-item" v-else>
                    <router-link :to="'/checkout'" tag="a" class="nav-link">
                        <span class="cart-quantity">{{productsQuantity}}</span> <i class="fa fa-shopping-cart"></i> Cart
                    </router-link>
                </li>
                <li class="nav-item d-block d-sm-block d-md-none">
                    <form class="search-input" @submit.prevent="searchProduct" method="post">
                        <input type="text" placeholder="Search..." v-model="searchText">
                        <button class="search-button" type="submit"><i class="fa fa-search"></i></button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="emptyCartModal" tabindex="-1" role="dialog" aria-labelledby="emptyCartModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title justify-content-center" id="emptyCartModalLabel">Your cart is empty.</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              Add a product to your cart (or a few!) before going to the check out.
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>

</nav>
